<template>
	<view class="container">
		<view class="storename">
			<uni-icons type="left" size="20" color="#ffffff" class="back" @click="backFun"></uni-icons>
			<image
				src="https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600"
				mode="aspectFill" style="border-radius: 20rpx;"></image>
			<view class="desc">
				<view class="name">
					某某餐厅
				</view>
				<view class="welcome">
					欢迎光临某某餐厅，祝您用餐愉快！
				</view>
			</view>

		</view>

		<view class="searchBox">
			<uni-section>
				<uni-search-bar placeholder="搜索美食" bgColor="#ffffff" @confirm="search" />
			</uni-section>
		</view>

		<!--左侧栏-->
		<scroll-view scroll-y="true" class="nav_left">
			<block v-for="(item,index) in leftList" :key="item.id">
				<view class="nav_left_items" :class="index == isActive?'active':''" @click="clickFun(item.id,index)">
					{{item.tit}}
				</view>
			</block>
		</scroll-view>
		<!--右侧栏-->
		<scroll-view scroll-y="true" class="nav_right">
			<view>
				<block v-for="(item,index) in rights" :key="item.id">
					<view class="nav_right_items">
						<label>
							<image :src="item.img" mode="aspectFill"></image>
							<view class="infos">
								<view class="info-left">
									<b
										style="font-size: 30rpx;font-weight: 700;margin-bottom: 10rpx;">热【{{item.tit}}】</b>
									<view style="color: darkred;font-size: 32rpx;">￥{{item.price}}
										<span
											style="margin-left: 15rpx; color: #777; text-decoration: line-through;font-size: 26rpx;">￥20.00</span>
									</view>
								</view>
								<view class="info-right">
									<view style="color: #777; font-size: 25rpx;">已售10万+份</view>
									<button @click="buy">+ 选购</button>
								</view>
							</view>
						</label>
					</view>
				</block>
			</view>
			<!--如果无数据，则显示数据-->
			<view class="nodata_text" v-if="rights.length == 0">该分类暂无数据</view>
		</scroll-view>

		<view class="ji" @click="pay">
			已选: {{num}}件
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				leftList: [{
					id: 1,
					tit: '湘菜',
				}, {
					id: 2,
					tit: '粤菜',
				}, {
					id: 3,
					tit: '鲁菜',
				}, {
					id: 4,
					tit: '川菜',
				}, {
					id: 5,
					tit: '其他',
				}, {
					id: 6,
					tit: '湘菜',
				}, {
					id: 7,
					tit: '粤菜',
				}, {
					id: 8,
					tit: '鲁菜',
				}, {
					id: 9,
					tit: '川菜',
				}, {
					id: 10,
					tit: '其他',
				}],
				rights: [],
				rightList: [
					[{
							id: 1,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 2,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 4,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 5,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/302457/pexels-photo-302457.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 6,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
					],
					[{
							id: 1,
							tit: '麻婆豆腐',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 2,
							tit: '麻婆豆腐',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '麻婆豆腐',
							img: 'https://images.pexels.com/photos/302457/pexels-photo-302457.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 4,
							tit: '麻婆豆腐',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 5,
							tit: '麻婆豆腐',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						}
					],
					[{
							id: 1,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/302457/pexels-photo-302457.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 2,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 4,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/327158/pexels-photo-327158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 5,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '45.00'
						}
					],
					[{
							id: 1,
							tit: '美味烧烤',
							img: 'https://images.pexels.com/photos/327158/pexels-photo-327158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 2,
							tit: '美味烧烤',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '美味烧烤',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 4,
							tit: '美味烧烤',
							img: 'https://images.pexels.com/photos/327158/pexels-photo-327158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						}
					],
					[{
							id: 1,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 2,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 4,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 5,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 6,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},

					],
					[{
							id: 1,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/302457/pexels-photo-302457.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 2,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 4,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/327158/pexels-photo-327158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 5,
							tit: '大盘鸡',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '45.00'
						}
					],
					[{
							id: 1,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 2,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 4,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 5,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 6,
							tit: '宫保鸡丁',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},

					],
					[{
							id: 1,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 2,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 4,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 5,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/302457/pexels-photo-302457.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 6,
							tit: '辣椒炒肉',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
					],
					[{
							id: 1,
							tit: '宫保鸡丁4',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 2,
							tit: '宫保鸡丁4',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '宫保鸡丁4',
							img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 4,
							tit: '宫保鸡丁4',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 5,
							tit: '宫保鸡丁4',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 6,
							tit: '宫保鸡丁4',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},

					],
					[{
							id: 1,
							tit: '宫保鸡丁2',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 2,
							tit: '宫保鸡丁2',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 3,
							tit: '宫保鸡丁2',
							img: 'https://images.pexels.com/photos/248413/pexels-photo-248413.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
							price: '12.00'
						},
						{
							id: 4,
							tit: '宫保鸡丁2',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 5,
							tit: '宫保鸡丁2',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},
						{
							id: 6,
							tit: '宫保鸡丁2',
							img: 'https://images.pexels.com/photos/2313686/pexels-photo-2313686.jpeg?auto=compress&cs=tinysrgb&w=600',
							price: '12.00'
						},

					]
				],
				isActive: 0,
			}
		},
		// 分享
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		onShow() {
			this.rights = this.rightList[0]
		},
		methods: {
			clickFun(id, index) {
				console.log(id, index);
				this.rights = this.rightList[id - 1]
				this.isActive = index
			},

			backFun() {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			},

			buy() {
				uni.showToast({
					title: "已选购"
				})

				this.num++
			},

			pay() {
				uni.navigateTo({
					url: "/pages/pay/pay"
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f5f5f5;
	}

	.back {
		position: absolute;
		top: 50rpx;
		left: 30rpx;
		background-color: rgba(0, 0, 0, 0.6);
		padding: 5rpx;
		border-radius: 6rpx;
	}

	.container {
		position: relative;
		width: 100%;
		height: calc(100vh - 149.8rpx);
		background-color: #fff;
		color: #939393;
	}

	.searchBox {
		width: 100%;
		padding-bottom: 10rpx;
	}

	/*左侧*/
	.nav_left {
		display: inline-block;
		width: 25%;
		height: calc(100vh - 360rpx);
		background: #f5f5f5;
		text-align: center;
	}

	/*左侧项*/
	.nav_left .nav_left_items {
		line-height: 70rpx;
		padding: 12rpx 0;
		font-size: 14px;
		color: #5b5b5b;
	}

	.nav_left .nav_left_items.active {
		background: #00aa7f;
		color: #fff;
	}

	/*右侧*/
	.nav_right {
		position: absolute;
		top: 400rpx;
		right: 0;
		flex: 1;
		width: 75%;
		height: calc(100vh - 360rpx);
		padding: 0;
		box-sizing: border-box;
		background: #fff;
	}

	.nav_right .nav_right_items {
		float: left;
		width: 100%;
		text-align: center;
	}

	.nav_right .nav_right_items image {
		width: 90%;
		height: 130px;
		margin-top: 15px;
		border-radius: 10rpx;
	}

	.nav_right .nav_right_items view {
		display: block;
		margin-top: 2rpx;
		font-size: 26rpx;
		color: black;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.infos {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
	}

	.info-left {
		width: 48%;
		height: 100%;
		text-align: center;
	}

	.info-right {
		width: 48%;
		height: 100%;
		text-align: center;
	}

	.infos button {
		width: 150rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 28rpx;
		background-color: #00aa7f;
		color: #fff;
		margin-top: 10rpx;
	}

	.nodata_text {
		color: black;
		font-size: 14px;
		text-align: center;
	}

	/deep/.uni-searchbar__box {
		border: 1px solid #00aa7f !important;
		border-radius: 33rpx !important;
	}

	.storename {
		width: 100%;
		background-color: #ffffff;
		box-shadow: 2rpx 2rpx 20rpx #e5e5e5;
		padding: 140rpx 25rpx 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: url("https://images.pexels.com/photos/302457/pexels-photo-302457.jpeg?auto=compress&cs=tinysrgb&w=600") no-repeat;
		background-size: cover;
	}

	.storename image {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
	}

	.storename .name {
		font-size: 60rpx;
		color: #ffffff;
		font-weight: 700;
		margin-bottom: 10rpx;
		font-family: Arial, Helvetica, sans-serif;
	}

	.storename .info {
		font-size: 26rpx;
		color: #ffffff;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
	}


	.storename .welcome {
		width: 100%;
		font-size: 24rpx;
		color: #ffffff;
		padding: 10rpx 0rpx;
		border-radius: 6rpx;
	}

	.ji {
		position: fixed;
		right: 20rpx;
		bottom: 160rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #fdfffd;
		background-color: #FFA500;
		border-radius: 10rpx;
		padding: 10rpx;
	}
</style>